<template>
<div class="chart" ref="chartEl" :style="{width: props.config.width+'px',height:props.config.height+'px'}"></div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { onMounted, ref } from "vue";
const chartEl = ref(null)

const props = defineProps({
  config:Object,
  options:Object
})
console.log(props.config)

onMounted(()=> {
  setOptions()
})

const setOptions = (data)=>{
  let myCharts = echarts.init(chartEl.value);
  myCharts.setOption(data?data:props.options);
}
console.log('this',this)
// 向父组件暴露方法
defineExpose({
  setOptions
})
</script>
<style scoped lang="scss">
/* @import url(); 引入css类 */
.chart{
  //width: vw(500);
  //height: vh(450);
}
</style>